﻿@page "/datagrid/search"

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor
@using Syncfusion.Blazor.DropDowns
@using BlazorDemos
@using blazor_inventordata
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample demonstrates the DataGrid searching feature. In this sample, use the search box from toolbar to search DataGrid records.</p>
</SampleDescription>
<ActionDescription>
  <p>The DataGrid has option to search its content using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.EjsGrid%601~Search.html'>Search</a></code> method with search key as the parameter.</p>
  <p>In this demo, the DataGrid toolbar provides an option to search the DataGrid's records. The user can type the search key in the text box of the toolbar and click search button or press Enter key to perform the search operation. The <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.EjsGrid%601~Search.html'>Search</a></code> method will be initiated to perform the search here.</p>
  <p>More information on the search feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/searching/'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">

            <SfGrid DataSource="@GridData" Toolbar="@(new List<string>() { "Search" })" AllowPaging="true">
                <GridColumns>
                    <GridColumn Field=@nameof(InventorDetails.Inventor) IsPrimaryKey="true" HeaderText="Inventor Name" Width="180"></GridColumn>
                    <GridColumn Field=@nameof(InventorDetails.NumberofPatentFamilies) HeaderText="Number of Patent Families" TextAlign="TextAlign.Right"  Width="195"></GridColumn>
                    <GridColumn Field=@nameof(InventorDetails.Country) HeaderText="Country" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(InventorDetails.Mainfieldsofinvention) HeaderText="Main Fields of Invention" Width="130"></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<InventorDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = InventorDetails.GetAllRecords();
    }
}
